<template>
    <div class="resource-map">
        <PubTitle title="资源分布" />
        <div class="selection">
            <el-radio-group v-model="listQuery.selection" @change="getList">
                <el-radio label>全部</el-radio>
                <el-radio label="1">精品</el-radio>
            </el-radio-group>
        </div>
        <div v-if="!chartData.length" slot="empty" class="emptyBg">
            <el-empty :image-size="200"></el-empty>
        </div>
        <MyEcharts v-else :option="option" />
    </div>
</template>
<script>
import { openApiStatisticalDataQueryResourceMap } from "@/api/admin/data/data";
import Bus from "@/utils/bus.js";
export default {
    components: {
        PubTitle: () => import("./pubTitle.vue"),
        MyEcharts: () => import("@/components/myEcharts/index.vue")
    },
    data() {
        return {
            listQuery: {
                deptType: 1, //单位类型；1-校区，2-系，3-教研室
                selection: "", //是否精选课程，1-是，0-否
                sourceUnit: "" //单位
            },
            chartData: [],
            option: null
        };
    },
    mounted() {
        this.getList();
        Bus.$on("sendSchoolId", v => {
            Object.assign(this.listQuery, v);
            this.getList();
        });
    },
    beforeDestroy() {
        Bus.$off("sendSchoolId");
    },
    methods: {
        getList() {
            openApiStatisticalDataQueryResourceMap(this.listQuery).then(res => {
                let { data } = res.data;
                this.chartData = data;
                this.initEcharts(data);
            });
        },
        initEcharts(data) {
            // 饼图
            this.option = {
                tooltip: {},
                legend: {
                    // 图例
                    data: data.map(v => v.name),
                    right: "0%",
                    top: "30%",
                    orient: "vertical",
                    textStyle: { color: "#ffffff" }
                },
                series: [
                    {
                        type: "pie",
                        label: {
                            show: true,
                            formatter:"\n{b} {c}  ({d}%)\n", // b代表名称，c代表对应值，d代表百分比
                        },
                        radius: "50%", //饼图半径
                        data: data,
                        itemStyle: {
                            // color: ["#ff0","#f00"],
                        }
                    }
                ],
                color: [
                    "#1e74be",
                    "#0099d3",
                    "#00bacb",
                    "#00bacb",
                    "#00d6ab",
                    "#92ec86",
                    "#f9f871",
                    "#faf80f"
                ],
                animationDuration: 1000
            };


        }
    }
};
</script>
<style scoped>
.resource-map {
    position: relative;
}
.selection {
    position: absolute;
    right: 0;
    top: 15px;
    z-index: 2;
}
.el-radio {
    color: #fff;
}
</style>